<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0;}
        ul{list-style: none;}
        a{text-decoration:none;}
        .main-nav{max-width: 1200px;margin: 0 auto;}
        .main-nav .logo{display:block;float: left;}
        .main-nav .menu{display:none;float: right;}
        .main-nav a{float: left;}
        .nav{float: right;}
        .nav li{display: inline-block;}
        .body{max-width: 1200px;margin: 0 auto;}
        .body ul li img{width: 300px;height: 250px;}
        /* 放在li中 */
        .body ul li{float: left;width: 25%;transition: 1s linear;}
        .body ul li img{width: 100%;}
        /* 宽度小于 768 像素则修改li显示的宽度 */
        @media screen and (max-width:768px){
            .body ul li{
                width: 50%;
            }
        }
        /* 媒体查询 */
        /* 宽度小于 576 像素则修改菜单和nav的显示与否 */
        @media screen and (max-width:576px){
            .main-nav .menu{
                max-width: 576px;
                display:block;
            }
            .main-nav .nav{
                display:none;
            }
            .body ul li{
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <nav class="main-nav">
       <a href="index.html" class="logo">LOGO</a>
       <ul class="nav">
        <li><a href="">电视剧</a></li>
        <li><a href="">动漫</a></li>
        <li><a href="">电影</a></li>
       </ul>
       <a href="" class="menu">菜单</a>
       <div style="clear:both"></div>
    </nav>
    <div class="body">
        <ul>
            <li><img src="./image/1.jpg" alt=""></li>
            <li><img src="./image/2.webp" alt=""></li>
            <li><img src="./image/3.webp" alt=""></li>
            <li><img src="./image/4.webp" alt=""></li>
            <div style="clear:both"></div>
        </ul>
    </div>
</body>
</html>